<template>
  <div class="opContaniner" @click.stop="openPopover">
    <el-popover
      placement="bottom"
      width="600px"
      trigger="manual"
      :offset="150"
      :visible-arrow="false"
      v-model="visible"
    >
      <template v-if="fliterConfig.filterRender">
        <RenderCpnOp :render="fliterConfig.filterRender"></RenderCpnOp>
      </template>
      <template v-else>
        <components
          :is="fliterConfig.filterType"
          v-bind="fliterConfig"
        ></components>
      </template>
      <i
        class="el-icon-search opwrapper"
        :style="{
          color: hasValue ? '#409EFF' : '#C0C4CC',
        }"
        slot="reference"
      ></i>
    </el-popover>
  </div>
</template>
<script>
import Input from "./input.vue";
import Select from "./select.vue";
import DatePicker from "./datePicker.vue";
import RenderCpnOp from "./renderCpnOp";
export default {
  props: ["fliterConfig", "updateFilter"],
  components: { Input, Select, DatePicker, RenderCpnOp },
  provide() {
    return {
      closePopover: () => this.closePopover(),
      updateFilter: (e) => this.updateFilter(e),
      updateValue: (e) => this.updateValue(e),
    };
  },
  data() {
    return {
      filterValue: "",
      visible: false,
    };
  },
  methods: {
    updateValue(value = "") {
      this.filterValue = value;
    },
    closePopover() {
      this.visible = false;
    },
    openPopover() {
      window.dispatchEvent(new PointerEvent("click"));
      this.$nextTick(() => {
        this.visible = true;
      });
    },
  },
  computed: {
    hasValue() {
      return Array.isArray(this.filterValue)
        ? this.filterValue.length
        : this.filterValue;
    },
  },
  mounted() {
    window.addEventListener("click", this.closePopover);
    window.addEventListener("resize", this.closePopover);
  },
  destroyed() {
    window.removeEventListener("click", this.closePopover);
    window.removeEventListener("resize", this.closePopover);
  },
};
</script>
<style scoped lang="less">
.opContaniner {
  display: inline-block;
}
.opwrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  width: 24px;
  font-size: 16px;
  font-weight: 900;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
  justify-content: center;
}
</style>
